<template>
	<view class="tie-in-list">
		<view class="tie-in-list-nav">
			<u-navbar :is-back="true" :left="capsuleWidth">
				<view class="my-match" @click="goMyMatch">
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/icon7.png"></image>
					我的方案
				</view>
				<u-tabs
					ref="tabs"
					:list="tabList"
					:current="tabsIndex"
					active-color="#141414"
					inactive-color="#666"
					:is-scroll="false"
					height="44px"
					:style="{width: '300rpx',height: '100%',position: 'absolute'}"
					@change="sortFun">
				</u-tabs>
			</u-navbar>
		</view>
		<block v-if="show">
			<movable-area class="edit-btn">
				<movable-view direction="all" class="edit-btn-img">
					<image :lazy-load="true" :src="list_icon" @click="goPlus" class="shake"></image>
				</movable-view>
			</movable-area>
			<view class="match-list">
				<view class="match-list-banner" v-for="(data,index) in bannerList" :key="index" v-if="tabsIndex==index">
					<u-image 
						:src="data.image" 
						:fade="true" 
						width="690rpx" 
						height="200rpx" 
						mode="aspectFit" 
						border-radius="10" 
						@click="goBannerUrl(data)">
					</u-image>
					<view class="match-info" v-if="data.status==1">
						<view class="match-info-title">距离活动结束还剩</view>
						<view class="match-info-countdown">
							<u-count-down 
								:timestamp="data.end_time - data.start_time" 
								:show-border="true" 
								border-color="#FFF" 
								bg-color="#FFF" 
								separator="zh"
								separator-color="#FFF"
								:hide-zero-day="true">
							</u-count-down>
						</view>
						<view class="match-info-rule" @click="showRule">查看活动规则 →</view>
					</view>
				</view>
				<block v-if="tabsIndex==0">
					<u-waterfall v-model="matchList" ref="matchList" :add-time="0">
						<template v-slot:left="{leftList}" >
							<view class="match-item" v-for="(data, index) in leftList" :key="index" @click="goMatchInfo(data.match_id)">
								<view 
									class="match-tag" 
									:class="{'tag-1': data.sort_num==1,'tag-2': data.sort_num==2,'tag-3': data.sort_num==3}" 
									v-if="data.sort_num">
									No.{{data.sort_num}}
								</view>
								<view class="match-img">
									<u-image :src="data.img" :fade="true" width="335rpx" height="335rpx" mode="aspectFit"></u-image>
								</view>
								<view class="match-name">{{data.name}}</view>
								<view class="match-info">
									<view class="match-info-user">
										<image :src="data.user.heard_img"></image>
										<text>{{data.user.nickname}}</text>
									</view>
									<view class="match-info-click">点赞：{{data.like}}</view>
								</view>
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view class="match-item" v-for="(data, index) in rightList" :key="index" @click="goMatchInfo(data.match_id)">
								<view 
									class="match-tag" 
									:class="{'tag-1': data.sort_num==1,'tag-2': data.sort_num==2,'tag-3': data.sort_num==3}" 
									v-if="data.sort_num">
									No.{{data.sort_num}}
								</view>
								<view class="match-img">
									<u-image :src="data.img" :fade="true" width="335rpx" height="335rpx" mode="aspectFit"></u-image>
								</view>
								<view class="match-name">{{data.name}}</view>
								<view class="match-info">
									<view class="match-info-user">
										<image :src="data.user.heard_img"></image>
										<text>{{data.user.nickname}}</text>
									</view>
									<view class="match-info-click">点赞：{{data.like}}</view>
								</view>
							</view>
						</template>
					</u-waterfall>
				</block>
				<block v-if="tabsIndex==1">
					<u-waterfall v-model="matchHotList" ref="matchHotList" :addTime="0">
						<template v-slot:left="{leftList}">
							<view class="match-item" v-for="(data, index) in leftList" :key="index" @click="goMatchInfo(data.match_id)">
								<view class="match-tag" :class="{'tag-1': data.sort_num==1,'tag-2': data.sort_num==2,'tag-3': data.sort_num==3}" v-if="data.sort_num">
									{{data.sort_num}}
								</view>
								<view class="match-img">
									<u-image :src="data.img" :fade="true" width="335rpx" height="335rpx" mode="aspectFit"></u-image>
								</view>
								<view class="match-name">{{data.name}}</view>
								<view class="match-info">
									<view class="match-info-user">
										<image :src="data.user.heard_img"></image>
										<text>{{data.user.nickname}}</text>
									</view>
									<view class="match-info-click">点赞：{{data.like}}</view>
								</view>
							</view>
						</template>
						<template v-slot:right="{rightList}">
							<view class="match-item" v-for="(data, index) in rightList" :key="index" @click="goMatchInfo(data.match_id)">
								<view class="match-tag" :class="{'tag-1': data.sort_num==1,'tag-2': data.sort_num==2,'tag-3': data.sort_num==3}" v-if="data.sort_num">
									{{data.sort_num}}
								</view>
								<view class="match-img">
									<u-image :src="data.img" :fade="true" width="335rpx" height="335rpx" mode="aspectFit"></u-image>
								</view>
								<view class="match-name">{{data.name}}</view>
								<view class="match-info">
									<view class="match-info-user">
										<image :src="data.user.heard_img"></image>
										<text>{{data.user.nickname}}</text>
									</view>
									<view class="match-info-click">点赞：{{data.like}}</view>
								</view>
							</view>
						</template>
					</u-waterfall>
				</block>
			</view>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
			<pt-nomore v-if="(noMore && matchList.length && tabsIndex==0) || (noMore && matchHotList.length && tabsIndex==1)"></pt-nomore>
			<pt-nothing 
				:fixed="true" 
				text="还没有人添加过方案哦~"
				:top="navHeight.toString()"
				icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1"
				v-if="(noMore && !matchList.length && tabsIndex==0) || (noMore && !matchHotList.length && tabsIndex==1)">
			</pt-nothing>
		</block>
		<!-- <u-tabbar :list="tabbarList" :icon-size="44" :height="100"></u-tabbar> -->
		<pt-loading></pt-loading>
		
		<!-- 活动规则 -->
		<uni-popup ref="rules" type="center">
			<view class="rules-box">
				<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/rule-bg.png"></image>
				<scroll-view class="rules-info" scroll-y>
					<view class="rules-info-tit"></view>
					<view class="rules-info-time">{{start_time}} - {{end_time}}截止</view>
					<view class="rules-info-1">
						<view class="rule-info-tit">
							<view class="rule-info-tit-before"><text></text></view>
							奖项介绍
							<view class="rule-info-tit-after"><text></text></view>
						</view>
						<view class="rules">
							<view class="rules-first">
								<text>第{{first.rank}}名奖励</text>
								<text>{{first.bonus}}</text>
							</view>
							<view class="rules-last">
								<text v-for="(data,index) in rule" :key="index">
									<text>第{{data.rank}}名奖励</text>
									<text>{{data.bonus}}</text>
								</text>
							</view>
						</view>
					</view>
					<view class="rules-info-2">
						<view class="rule-info-tit">
							<view class="rule-info-tit-before"><text></text></view>
							活动规则
							<view class="rule-info-tit-after"><text></text></view>
						</view>
						<view class="rule-info-html">
							<u-parse :html="rule1"></u-parse>
						</view>
					</view>
					<view class="rules-info-2">
						<view class="rule-info-tit">
							<view class="rule-info-tit-before"><text></text></view>
							注意事项
							<view class="rule-info-tit-after"><text></text></view>
						</view>
						<view class="rule-info-html">
							<u-parse :html="rule2"></u-parse>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 活动规则 -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				navHeight: 0,
				Refresh: false,
				page: 0,
				isLoading: false,
				noMore: false,
				styleList: [],
				styleIndex: 0,
				style_id: '',
				matchList: [],
				matchHotList: [],
				tabbarList: [],
				tabsIndex: 0,
				bannerUrl: '',
				bannerPathUrl: '',
				capsuleWidth: 0,
				list_icon: '',
				is_open: false,
				currentTime: '',
				timestamp: '',
				is_start_before: false,
				is_start: false,
				start_time: '',
				end_time: '',
				rule: [],
				rule1: '<p>1、进入本总部小程序，点击下方的【方案】，点击右下角的加号，选择喜欢的风格开始自己的搭配创作，点击【生成方案】，填写信息生成清单、报价。</p><p>2、活动期间，搭配方案公开展示，供所有用户观看点赞。</p><p>3、用户可以分享自己的搭配给好友或者朋友圈来点集赞。</p>',
				rule2: '<p>1、用户有且仅有一套搭配方案可以参与获奖集赞评选，按最高赞者算。</p><p>2、用户在获奖之后总部工作人员会联系本人，请注意接听电话。</p><p>3、用户不可作弊参与活动，一经发现，取消获奖资格。</p><p>4、本次活动最终解释权归本总部所有。</p>',
				first: {
					rank: '',
					bonus: '',
				},
				last: [],
				order_by: 'click',
				tabList: [{
					name: '在线设计'
				},{
					name: '在线搭配'
				}],
				typeValue: 2,
				bannerList: []
			};
		},
		onLoad() {
			if(uni.getStorageSync('typeValue')){
				this.typeValue = uni.getStorageSync('typeValue')
			}else{
				uni.setStorageSync('typeValue',this.typeValue)
			}
			this.init()
			if(uni.getStorageSync('userInfo')){
				this.addFoot('方案-列表-热门')
			}
			// #ifdef MP-WEIXIN
			this.capsuleWidth = uni.getMenuButtonBoundingClientRect().width
			// #endif
			this.$nextTick(() => {
				uni.createSelectorQuery().in(this).select('.tie-in-list-nav').boundingClientRect().exec(rect => {
					if(rect.length){
						this.navHeight = (rect[0].height + 115) * 2
					}
				})
			})
		},
		onShow() {
			this.currentTime = new Date().getTime()
			this.getHome()
			this.getBanner()
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '',
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},200)
		},
		onReady() {
			if(uni.getStorageSync('tabbarIconsBefore')){
				if(uni.getStorageSync('userInfo')){
					this.tabbarList[0].iconPath = uni.getStorageSync('tabbarIconsBefore').img1
					this.tabbarList[1].iconPath = uni.getStorageSync('tabbarIconsBefore').img2
					this.tabbarList[2].iconPath = uni.getStorageSync('tabbarIconsBefore').img3
					this.tabbarList[3].iconPath = uni.getStorageSync('tabbarIconsBefore').img4
					this.tabbarList[4].iconPath = uni.getStorageSync('tabbarIconsBefore').img5
				}else{
					this.tabbarList[0].iconPath = uni.getStorageSync('tabbarIconsBefore').img1
					this.tabbarList[1].iconPath = uni.getStorageSync('tabbarIconsBefore').img2
					this.tabbarList[2].iconPath = uni.getStorageSync('tabbarIconsBefore').img4
					this.tabbarList[3].iconPath = uni.getStorageSync('tabbarIconsBefore').img5
				}
			}
			if(uni.getStorageSync('tabbarIcons')){
				if(uni.getStorageSync('tabbarIcons').img4){
					if(uni.getStorageSync('userInfo')){
						this.tabbarList[3].selectedIconPath = uni.getStorageSync('tabbarIcons').img4
					}else{
						this.tabbarList[2].selectedIconPath = uni.getStorageSync('tabbarIcons').img4
					}
				}
			}
			setTimeout(() => {
				this.$refs.tabs.init()
			},500)
		},
		onPullDownRefresh() {
			this.Refresh = true
			this.page = 0
			this.noMore = false
			this.$nextTick(() => {
				this.matchList = []
				this.matchHotList = []
				if(this.tabsIndex==0){
					this.$refs.matchList.clear();
					// if(this.is_open){
					// 	this.order_by = 'like'
					// }else{
					// 	this.order_by = 'add_time'
					// }
				}else{
					this.$refs.matchHotList.clear();
					// if(this.is_open){
					// 	this.order_by = 'add_time'
					// }else{
					// 	this.order_by = 'like'
					// }
				}
			})
			setTimeout(() => {
				this.init()
				this.getHome()
				this.getBanner()
			},500)
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.isLoading = true
				this.init()
			}
		},
		methods: {
			addFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1
				})
			},
			getBanner(){
				this.$u.api.MatchBanner().then(res => {
					this.bannerList = res.datas.image
					this.list_icon = res.datas.list_icon
				})
			},
			getHome(){
				// 获取是否显示商户主页
				if(uni.getStorageSync('userInfo')){
					if(uni.getStorageSync('is_open')){
						this.tabbarList = getApp().globalData.arrowMerchantMenu
					}else{
						// #ifdef MP-WEIXIN
						if(uni.getExtConfigSync().appid==='wx9f2da8a90bb750f7'){
							this.tabbarList = getApp().globalData.merchantMenu.slice(1)
						}else{
							this.tabbarList = getApp().globalData.merchantMenu
						}
						// #endif
						// #ifdef APP-PLUS || H5
						this.tabbarList = getApp().globalData.merchantMenu
						// #endif
					}
					this.$u.api.ShowHome().then(res => {
						let userInfo = JSON.parse(uni.getStorageSync('userInfo'))
						if(userInfo.store_id!=res.datas.store_id){
							userInfo.store_id = res.datas.store_id
						}
						if(userInfo.store_name!==res.datas.store_name){
							userInfo.store_name = res.datas.store_name
						}
						uni.setStorageSync('userInfo',JSON.stringify(userInfo))
						if(res.datas.is_open==1){
							this.tabbarList = getApp().globalData.arrowMerchantMenu
							uni.setStorageSync('is_open',true)
						}else{
							uni.setStorageSync('is_open',false)
							// #ifdef MP-WEIXIN
							if(uni.getExtConfigSync().appid==='wx9f2da8a90bb750f7'){
								this.tabbarList = getApp().globalData.merchantMenu.slice(1)
							}else{
								this.tabbarList = getApp().globalData.merchantMenu
							}
							// #endif
							// #ifdef APP-PLUS || H5
							this.tabbarList = getApp().globalData.merchantMenu
							// #endif
						}
					})
					this.$u.api.UserNoticeCount().then(res => {
						if(res.datas){
							this.$set(this.tabbarList[this.tabbarList.length-1],'count',res.datas)
						}else{
							this.$set(this.tabbarList[this.tabbarList.length-1],'count',res.datas)
						}
					})
				}else{
					// #ifdef MP-WEIXIN
					if(uni.getExtConfigSync().appid==='wx9f2da8a90bb750f7'){
						this.tabbarList = getApp().globalData.arrowDefaultMenu
					}else{
						this.tabbarList = getApp().globalData.defaultMenu
					}
					// #endif
					// #ifdef APP-PLUS || H5
					this.tabbarList = getApp().globalData.defaultMenu
					// #endif
				}
			},
			init(){
				let match_type = this.tabsIndex==0?2:1
				this.$u.api.matchList({page: this.page,order_by: this.order_by,asc: 2,match_type: match_type }).then(res => {
					this.show = true
					this.isLoading = false
					if(res.datas.length){
						if(this.page==0){
							if(this.tabsIndex==0){
								this.matchList = res.datas
							}else{
								this.matchHotList = res.datas
							}
						}else{
							res.datas.forEach(item => {
								if(this.tabsIndex==0){
									this.matchList.push(item)
								}else{
									this.matchHotList.push(item)
								}
							})
						}
					}else{
						this.noMore = true
					}
				}).then(() => {
					if(this.Refresh){
						setTimeout(() => {
							this.Refresh = false
							uni.showToast({
								icon: 'none',
								title: '刷新成功'
							})
							uni.stopPullDownRefresh()
						},500)
					}
				})
			},
			goMatchInfo(match_id){
				uni.navigateTo({
					animationDuration: 500,
					url: '/tie-in/tie-in-preview?match_id='+match_id
				})
			},
			goPlus(){
				this.addFoot('方案-列表-我要参与')
				uni.navigateTo({
					animationDuration: 500,
					url: '/tie-in/tie-in'
				})
			},
			sortFun(e){
				this.noMore = false
				this.page = 0
				this.tabsIndex = e
				this.$nextTick(() => {
					if(this.tabsIndex==0){
						this.$refs.matchList.clear();
					}else{
						this.$refs.matchHotList.clear();
					}
					if(e==0){
						this.addFoot('方案-列表-热门')
					}else if(e==1){
						this.addFoot('方案-列表-推荐')
					}
					this.matchList = []
					this.matchHotList = []
					this.init()
					this.getBanner()
				},200)
			},
			goBannerUrl(data){
				if(!data.url){
					return
				}
				switch (data.url_type){
					case 1:
						uni.switchTab({
							url: data.url
						})
						break;
					case 2:
						uni.navigateTo({
							animationDuration: 500,
							url: data.url
						})
						break;
					case 3:
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/webview/webview?url='+encodeURIComponent(data.url)
						})
						break;
				}
			},
			goMyMatch(){
				uni.navigateTo({
					animationDuration: 500,
					url: '/my/user-match/user-match'
				})
			},
			showRule(){
				this.$refs.rules.open()
			}
		}
	}
</script>

<style lang="scss">
	@font-face {
		font-family: 'din';
		src: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/recomBrand/DIN-Bold.ttf') format('truetype');
	}
	page{
		background-color: #F9F9F9;
	}
	.tie-in-list-nav{
		/deep/ .u-tabs{
			height: 100%;
		}
		/deep/ .u-scroll-view{
			height: 100%;
			.u-scroll-box{
				height: 100%;
				align-items: center;
				.u-tab-item{
					font-size: 14px !important;
					&.active{
						font-size: 16px !important;
					}
				}
				.u-tab-bar{
					height: 3px !important;
				}
			}
		}
	}
	.my-match{
		position: absolute;
		left: 70rpx;
		padding: 0 20rpx 0 10rpx;
		height: 26px;
		text-align: center;
		line-height: 26px;
		background: #F8F8F8;
		border-radius: 23rpx;
		color: #666;
		top: 50%;
		transform: translateY(-50%);
		font-size: 10px;
		image{
			width: 12px;
			height: 14px;
			vertical-align: middle;
			margin: -4px 5px 0;
		}
	}
	.tie-in-list /deep/ .u-slot-content{
		justify-content: center;
	}
	.match-list{
		padding: 30rpx 20rpx;
		/deep/ .u-column:first-child{
			padding-left: 10rpx;
		}
		/deep/ .u-column:last-child{
			padding-left: 10rpx;
		}
		.match-list-banner{
			padding: 0 10rpx;
			position: relative;
			margin-bottom: 30rpx;
			.match-info{
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				text-align: center;
				.match-info-title{
					color: #FFF;
				}
				.match-info-countdown{
					margin: 20rpx 0;
				}
				.match-info-rule{
					display: inline-block;
					background-color: #276270;
					color: #FFF;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 80rpx;
					padding: 0 20rpx;
					font-size: 28rpx;
				}
			}
		}
		.match-item{
			margin-bottom: 30rpx;
			width: 335rpx;
			position: relative;
			background-color: #FFF;
			border-radius: 0 0 8rpx 8rpx;
			&:last-child{
				margin-bottom: 0;
			}
			.match-tag{
				position: absolute;
				padding: 0 10rpx;
				height: 44rpx;
				background: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/icon6.png') no-repeat;
				background-size: cover;
				z-index: 10;
				font-size: 22rpx;
				text-align: center;
				line-height: 44rpx;
				font-family: 'din';
				top: 0;
				left: 35rpx;
				&.tag-1{
					background: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/icon3.png') no-repeat;
					background-size: cover;
				}
				&.tag-2{
					background: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/icon4.png') no-repeat;
					background-size: cover;
				}
				&.tag-3{
					background: url('https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/icon5.png') no-repeat;
					background-size: cover;
				}
			}
			.match-img{
				border-radius: 8rpx 8rpx 0 0;
				overflow: hidden;
			}
			.match-name{
				font-size: 24rpx;
				margin: 20rpx;
				color: #141414;
				font-weight: bold;
			}
			.match-info{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx 20rpx;
				.match-info-user{
					flex: 1;
					min-width: 0;
					display: flex;
					align-items: center;
					margin-right: 10rpx;
					image{
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						margin-right: 10rpx;
					}
					text{
						font-size: 20rpx;
						color: #444;
						flex: 1;
						min-width: 0;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.match-info-price{
					font-size: 20rpx;
					color: #444;
					text{
						font-family: 'din';
					}
				}
			}
			.match-info-click{
				font-size: 24rpx;
				color: #6B6B6B;
			}
		}
	}
	.edit-btn{
		position: fixed !important;
		left: 0;
		top: 10rpx;
		bottom: 140rpx;
		left: 10rpx;
		right: 30rpx;
		pointer-events: none;
		z-index: 20;
		width: auto;
		height: auto;
		.edit-btn-img{
			position: absolute !important;
			width: 80rpx;
			height: 102rpx;
			pointer-events: auto;
			border-radius: 50%;
			top: initial;
			left: initial;
			right: 0;
			bottom: 0;
			bottom: constant(safe-area-inset-bottom);
			bottom: env(safe-area-inset-bottom);
			text-align: center;
			image{
				width: 80rpx;
				height: 102rpx;
				animation: shake 200ms infinite alternate;
			}
		}
	}
	@keyframes shake{
		from {
			transform: rotate(10deg);
		}
		to {
			transform: rotate(-10deg);
		}
	}
	.rules-box{
		width: 640rpx;
		height: 1000rpx;
		image{
			width: 640rpx;
			height: 1000rpx;
		}
		.rules-info{
			position: absolute;
			width: auto;
			top: 225rpx;
			left: 30rpx;
			right: 30rpx;
			bottom: 30rpx;
			text-align: center;
			.rule-info-tit{
				font-size: 24rpx;
				color: #261B0C;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
				.rule-info-tit-before{
					margin-right: 10rpx;
					text{
						display: inline-block;
						vertical-align: middle;
						width: 10rpx;
						height: 10rpx;
						background-color: #1F3F2B;
						opacity: .5;
						border-radius: 50%;
						margin: 0 10rpx;
					}
					&::before{
						content: '';
						display: inline-block;
						vertical-align: middle;
						width: 10rpx;
						height: 10rpx;
						background-color: #1F3F2B;
						opacity: .2;
						border-radius: 50%;
					}
					&::after{
						content: '';
						display: inline-block;
						vertical-align: middle;
						width: 10rpx;
						height: 10rpx;
						background-color: #1F3F2B;
						opacity: 1;
						border-radius: 50%;
					}
				}
				.rule-info-tit-after{
					margin-left: 10rpx;
					text{
						display: inline-block;
						vertical-align: middle;
						width: 10rpx;
						height: 10rpx;
						background-color: #1F3F2B;
						opacity: .5;
						border-radius: 50%;
						margin: 0 10rpx;
					}
					&::before{
						content: '';
						display: inline-block;
						vertical-align: middle;
						width: 10rpx;
						height: 10rpx;
						background-color: #1F3F2B;
						opacity: 1;
						border-radius: 50%;
					}
					&::after{
						content: '';
						display: inline-block;
						vertical-align: middle;
						width: 10rpx;
						height: 10rpx;
						background-color: #1F3F2B;
						opacity: .2;
						border-radius: 50%;
					}
				}
			}
			.rules-info-time{
				display: inline-block;
				background-color: #1F3F2B;
				height: 52rpx;
				line-height: 52rpx;
				color: #FFF;
				border-radius: 40rpx;
				text-align: center;
				color: #FFF;
				padding: 0 20rpx;
			}
			.rules-info-1{
				border: solid 4rpx #1F3F2B;
				border-radius: 10rpx;
				margin-top: 30rpx;
				padding: 20rpx;
				background-color: #FFBD8D;
				.rules{
					color: #261B0C;
					font-size: 24rpx;
					.rules-first{
						line-height: 50rpx;
					}
					.rules-last{
						display: flex;
						flex-direction: column;
						line-height: 50rpx;
						text{
							width: 100%;
							text-align: center;
							padding: 0 10rpx;
							white-space: nowrap;
							text{
								padding: 0;
							}
							// &:nth-child(2n){
							// 	text-align: left;
							// }
						}
					}
				}
			}
			.rules-info-2{
				background-color: #FFF;
				border-radius: 10rpx;
				margin-top: 30rpx;
				padding: 20rpx;
				.rule-info-html{
					text-align: left;
					font-size: 24rpx;
					line-height: 36rpx;
				}
				.rule-info-tit{
					.rule-info-tit-before{
						text{
							background-color: #F59359;
						}
						&::before{
							background-color: #F59359;
						}
						&::after{
							background-color: #F59359;
						}
					}
					.rule-info-tit-after{
						margin-left: 10rpx;
						text{
							background-color: #F59359;
						}
						&::before{
							background-color: #F59359;
						}
						&::after{
							background-color: #F59359;
						}
					}
				}
			}
		}
	}
</style>